<template>
	<view class="gy-ask-diagnosis-list">
		<view class="gy-ask-diagnosis-item gy-custom-card" v-for="(item,index) in props.list" :key="index" @click.stop="toCurrentDoctor(item)">
		    <view class="head">
		        <view class="type">{{ proxy.utils.arr.obj.find(typeList, item.type + '') }}</view>
				<view class="state">{{ proxy.utils.arr.obj.find(stateList, item.status + '') }}</view>
		    </view>
		    <view class="body">
		        <view class="doctor">
		            <com-avatar :src="item.doctorAvatar" />
		            <view class="doctor-details">
		                <view class="doctor-title">{{ item.doctorName }}<text>{{ item.positionName }}</text></view>
		                <view class="doctor-dept">{{ item.hospitalName }}<text>｜</text>{{ item.departmentName }}</view>
		            </view>
		        </view>
		        <view class="info">
		           <view class="info-item"><text>创建时间</text>{{ proxy.utils.date.format(item.createTime, "yyyy.MM.dd hh:mm") }}</view>
		           <view class="info-item"><text>问诊金额</text><com-price-text :price="item.payPrice / 100" color="#333333" /></view>
		        </view>
		    </view>
		    <view class="foot">
				<com-button v-if="item.status === 0" @click.stop="toPayFn(item.id, index)">去支付</com-button>
				<com-button v-if="item.status === 1 || item.status ===0" type="secondary" @click.stop="cancelAskDiagnosisFn(item.id, index)">
					取消问诊
				</com-button>
				<com-button v-if="item.status === 1 && isNeedPreAsk" type="secondary" @click.stop="toPreConsultaion(item.doctorId)">
					AI预问诊
				</com-button>
				<com-button v-if="item.status === 2 && item.type === 1" @click.stop="toAskDiagnosisFn(item)">去问诊</com-button>
				<com-button v-if="[3, 4].indexOf(item.status) !== -1 && item.type === 1" @click.stop="toAskDiagnosisFn(item)">
					查看记录
				</com-button>
				<com-button v-if="item.status === 3" type="secondary" @click.stop="toEvaluateFn(item.id,item.type)">去评价</com-button>
				<com-button v-if="[4, -1, -2].indexOf(item.status) !== -1" type="secondary" @click.stop="againFn(item)">再次问诊</com-button>
		    </view>
		</view>
	</view>

	<com-popup v-if="cancel.show" title="取消原因" confirmText="立即取消" @close="cancel.show = false" @submit="submitCancelFn">
		<view style="padding: 20rpx 50rpx;">
			<com-radio v-model="cancel.form.rejectMsg" v-for="(item,index) in cancelReasonList" :key="index" :activeValue="item.label" :inline="false">
				{{ item.label }}
			</com-radio>
		</view>
	</com-popup>

</template>

<script lang="ts" setup>

	import {
		ref,
		computed,
		getCurrentInstance
	} from 'vue';

	import {
		payAskDiagnosis,
		cancelAskDiagnosis
	} from "@/request/apis/ask-diagnosis.js";

	const { proxy }: any = getCurrentInstance();

	const emits = defineEmits(["remove"]);

	const isNeedPreAsk = ref(proxy.utils.system.getConfig("consultation.ispreconsultation"));

	const store = uni.$UIKitStore

	const props = defineProps({
	    list: {
	    	type: Array,
			default: () => []
	    },
		page: {
			type: Object as any
		}
	});

	const patient = computed(() => proxy.store.patient.current);

	const typeList = ref(proxy.utils.system.getDict("order_consultation_type"));
	const stateList = ref(proxy.utils.system.getDict("order_consultation_status"));

	const cancelReasonList = ref(proxy.utils.system.getDict("order_consultation_patient_cancel_reason"))

	const cancel = ref({
		show: false,
		index: 0,
		form: {
			orderId: "",
			rejectMsg: ""
		}
	});

	function cancelAskDiagnosisFn(id: string | number, index: number) {
		cancel.value = {
			show: true,
			index: index,
			form: {
				orderId: id,
				rejectMsg: cancelReasonList.value[0].label
			}
		}
		// props.page?.confirm({
		//     title: "取消提醒",
		//     content: "是否取消该问诊？",
		// 	confirm: () => {
		// 		props.page?.loading.show("正在取消");
		// 		cancelAskDiagnosis({
		// 			orderId: id
		// 		}).then(() => {
		// 			emits("remove", index);
		// 			props.page?.loading.hide();
		// 		}).catch(() => {
		// 			props.page?.loading.hide();
		// 		});
		// 	}
		// })
	}

	function submitCancelFn(){
		props.page?.loading.show("正在取消");
		cancelAskDiagnosis(cancel.value.form).then(() => {
			cancel.value.show = false;
			emits("remove", cancel.value.index);
			props.page?.loading.hide();
		}).catch(() => {
			props.page?.loading.hide();
		});
	}

	function toPayFn(id: string | number, index: number){
		props.page?.loading.show("支付中");
		payAskDiagnosis({
			orderId: id
		}).then((res: any) => {
			props.page?.loading.hide();
			proxy.utils.system.pay(res, () => {
				proxy.utils.uni.toast("支付成功，待医生接诊");
				emits("remove", index);
			});
		}).catch(() => {
			props.page?.loading.hide();
		});
	}

	async function toAskDiagnosisFn(item: any){
		//await store.uiStore.selectSession('p2p-' + id)
		uni.setStorageSync('imSession','p2p-' + item.wyyxAccId)
		proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/chat/index", {
			patientId: patient.value ? patient.value.id : "",
			deptId: item.departmentId,
			doctorId: item.doctorId
		});
	}

	function toEvaluateFn(id: string | number,type:string | number){
		proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/doctor/evaluate-create?orderId=" + id + '&type='+type);
	}

	function toPreConsultaion(id: any){
		proxy.utils.uni.route.go(`/pages-hospital-services/ask-diagnosis/pre/index?doctorId=${id}&patientId=${patient.value.id}`);
	}

	function againFn(item: any){
		proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/doctor/index", {
			doctorId: item.doctorId,
			deptId: item.departmentId
		});
	}

	function toCurrentDoctor(item: any){
		proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/doctor/index", {
			doctorId: item.doctorId,
			deptId: item.departmentId
		});
	}
</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-ask-diagnosis-list{
		.gy-ask-diagnosis-item{
		    .head{
		        @include flex-between-center;
		        font-size: var(--gy-font-size-medium);
		        font-weight: bold;
		        .type{
		            color: #6C5A32;
		        }
		        .state{
		            color: var(--gy-text-color-primary);
		        }
		    }
		    .body{
				margin:20rpx 0;
		        .doctor{
		            @include flex-start-center;
		            .doctor-details{
		                flex: 1;
		                height: 100rpx;
		                @include flex-between;
		                flex-direction: column;
		                padding-left: var(--gy-gap);
		                .doctor-title{
		                    font-weight: bold;
		                    color: var(--gy-text-color-primary);
							font-size: var(--gy-font-size-medium);
		                    text{
		                        color: var(--gy-text-color-secondary);
		                        font-size: var(--gy-font-size-base);
		                        margin-left: 20rpx;
		                        font-weight: 400;
		                    }
		                }
		                .doctor-dept{
		                    color: var(--gy-text-color-secondary);
		                    font-size: var(--gy-font-size-base);
		                    text{
		                        margin: 0 5rpx;
		                    }
		                }
		            }
		        }
		        .info{
		            margin-top: 20rpx;
		            @include flex-between-center;
		            .info-item{
		                @include flex-start-center;
		                color: var(--gy-text-color-secondary);
		                font-size: var(--gy-font-size-base);
		                text{
		                    color: 30rpx;
		                    font-weight: 400;
							margin-right: 10rpx;
		                }
		            }
		        }
		    }
		    .foot{
		        @include flex-end-center;
				:deep(.gy-button.inline){
					height: 70rpx !important;
					padding: 0 35rpx !important;
					border-radius: 35rpx !important;
					margin-left: 20rpx !important;
					font-size: 30rpx;
				}
		    }
		}
	}
</style>
